<template>
  <div class="mian">
    <div class="main_defalt" v-show="main">
      <ul>
        <li class="pics"><span class="box0">头像</span>
          <van-uploader :after-read="onRead" accept="image/jpeg;image/png" >
              <img :src="avatar" id="front" class="borderimg">
          </van-uploader>
        </li>
        <li @click="management"><span class="box1">账号管理</span><input type="button" readonly :value="userEmail"></li>
        <li @click="last_name"><span class="box2">姓</span>
          <input type="button" name="lastname" readonly :value="lastName">
        </li>
        <li @click="first_name"><span class="box3">名</span>
          <input type="button" name="firstname" readonly :value="firstName">
        </li>
        <li @click="sex"><span class="box4">性别</span><input type="button" readonly  :value="sexVal"></li>
        <li @click="education"><span class="box5">学历</span><input type="button" readonly :value="educationVal"></li>
        <li @click="academic"><span class="box6">学术研究领域</span><input type="button" readonly :value="academic_text"></li>
        <li @click="authentication"><span class="box7">审稿身份认证</span>
          <input type="button" class="box7_button uncertified" readonly v-if="!certify" value="未认证">
          <input type="button" class="box7_button audited" readonly v-if="certify == 'A'" value="待审核">
          <input type="button" class="box7_button invited" readonly v-if="certify == 'B'" value="待邀请">
          <input type="button" class="box7_button accepted" readonly v-if="certify == 'C'" value="待接受">
          <input type="button" class="box7_button passed" readonly v-if="certify == 'D'" value="已通过">
          <input type="button" class="box7_button rejected" readonly v-if="certify == 'E'" value="已驳回">
          <input type="button" class="box7_button accepted" readonly v-if="certify == 'F'" value="已接受（待提交资料）">
        </li>
      </ul>
      <ul style="border-bottom: 16px solid gainsboro;border-top: 16px solid gainsboro;">
        <li @click="phone"><span class="box8">手机号码</span>
          <input type="button" name="moblienum" readonly :value="mobilephone" >
        </li>
        <li @click="addr"><span class="box9">地址</span>
          <input type="button" name="addr" readonly :value="addrs">
        </li>
      </ul>
      <ul>
        <li @click="company"><span class="box10">工作单位</span>
          <input type="button" name="company" readonly :value="comPany">
        </li>
        <li @click="department"><span class="box11">部门</span><input name="department" type="button" readonly :value="departmentVal"></li>
        <li @click="title"><span class="box12">职称</span><input name="title" type="button" readonly :value="titleVal"></li>
        <li @click="job"><span class="box13">职务</span><input name="job" type="button" readonly :value="jobVal"></li>
      </ul>
      <!--select单选-->
      <van-popup v-model="showSex" position="bottom" :overlay="true">
           <van-picker show-toolbar :columns="sexselect" @cancel="onCancel" @confirm="sexOn" />
      </van-popup>
      <van-popup v-model="showEducation" position="bottom" :overlay="true">
           <van-picker show-toolbar :columns="educationselect" @cancel="onCancel" @confirm="educationOn" />
      </van-popup>

      <!--列表多选-->
      <van-popup class="list_van" v-model="academics" position="right" :overlay="true">
        <div class="head_tool"><span @click="close"><</span><span style="float: right;" @click="checkboxs">确定</span></div>
        <van-checkbox-group v-model="academic_text">
          <van-cell-group>
            <van-cell
              v-for="(item,index) in major"
              clickable
              :key="item"
              :title="`${item}`"
              @click="toggle(index)"
            >
              <van-checkbox :name="item" ref="checkboxes" />
            </van-cell>
          </van-cell-group>
        </van-checkbox-group>
      </van-popup>
    </div>
    <div class="change_input" v-show="showtext">
      <div class="head_tool">
        <span @click="backtext"><</span>
      </div>
      <input id="lastname" type="text" v-if="current == '1'" @blur="keeptext"  :value="lastName"   placeholder="请填写需要修改的内容" />
      <input id="firstname" type="text" v-else-if="current == '2'" @blur="keeptext"  :value="firstName"   placeholder="请填写需要修改的内容" />
      <input id="addr" type="text" v-else-if="current == '3'"  @blur="keeptext" :value="addrs"   placeholder="请填写需要修改的内容" />
      <input id="companys" type="text" v-else-if="current == '4'" @blur="keeptext"  :value="comPany"   placeholder="请填写需要修改的内容" />
      <input id="department" type="text" v-else-if="current == '5'" @blur="keeptext"  :value="departmentVal"   placeholder="请填写需要修改的内容" />
      <input id="title" type="text" v-else-if="current == '6'" @blur="keeptext"  :value="titleVal"   placeholder="请填写需要修改的内容" />
      <input id="job" type="text" v-else-if="current == '7'"  @blur="keeptext" :value="jobVal"   placeholder="请填写需要修改的内容" />
      <p>请输入需要修改的内容</p>
    </div>
  </div>
</template>

<script>
  import { Indicator,Toast } from 'mint-ui';
  import { RequestGet,RequestPost} from '@/api/http.js'
  export default {
    data() {
      return {
        uid: '',
        main:true,
        certify: '',
        identity:null,
        avatar:'',
        mobilephone:'',
        userEmail: '',
        sexselect:['男','女'],
        showSex:false,
        sexVal:'女',
        educationselect: ['博士', '硕士', '研究生', '本科', '大专'],
        showEducation:false,
        educationVal:'',
        departmentVal:'',
        titleVal:'',
        jobVal:'',
        major:[],
        show:false,
        academics:false,
        falg:false,
        showtext:false,
        current:0,
        firstName:'',
        lastName:'',
        comPany:'',
        addrs:'',
        academic_text: [],
      }
    },
    methods: {
      updatePic(){
         this.$router.push('/avatars');
      },
      getInfo () {
        let self = this;
        RequestPost({url:'/user/info',data: {'uid':this.$route.query.uid}}).then((respones)=>{
          if(respones.data.code == 1){
            self.avatar = respones.data.data.info.avatar;
            self.mobilphone = respones.data.data.info.mobile;
            self.userEmail = respones.data.data.info.email;
            self.firstName = respones.data.data.info.first_name;
            self.lastName = respones.data.data.info.last_name;
            self.sexVal = (respones.data.data.info.gender == 1) ? '男' : '女';
            self.educationVal = respones.data.data.info.degree;
            self.academic_text = respones.data.data.info.academic_text;
            self.mobilephone = respones.data.data.info.mobile;
            self.addrs = respones.data.data.info.address;
            self.comPany = respones.data.data.info.company;
            self.departmentVal = respones.data.data.info.department;
            self.titleVal = respones.data.data.info.professional_title;
            self.jobVal = respones.data.data.info.position;
            self.major = respones.data.data.themes;
            self.certify = respones.data.data.info.is_cert;
          }else{
            Toast('服务器繁忙，请稍后再试！');
          }
        })
      },
        backtext(){
            this.main = true;
            this.showtext = false;
        },
      keeptext(){
        let self = this;
        let txts =document.querySelector('.change_input input').value;
        let msg = document.querySelector('.change_input p');
        let firstname = document.querySelector('#firstname');
        let lastname = document.querySelector('#lastname');
        let company = document.querySelector('#companys');
        let addr = document.querySelector('#addr');
        let department = document.querySelector('#department');
        let title = document.querySelector('#title');
        let job = document.querySelector('#job');
        if(txts == ''){
          msg.style.color = 'red';
        }else{
          msg.style.color = '#303030';
          let data = {'id':this.$route.query.uid};
          if(self.current == '1'){
            data['last_name'] = lastname.value;
            self.lastName = lastname.value;
          }else if(self.current == '2'){
            data['first_name'] = firstname.value;
            self.firstName = firstname.value;
          }else if(self.current == '3'){
            data['address'] = addr.value;
            self.addrs = addr.value;
          }else if(self.current == '4'){
            data['company'] = company.value;
            self.comPany = company.value;
          } else if(self.current == '5'){
            data['department'] = department.value;
            self.departmentVal = department.value;
          }else if(self.current == '6'){
            data['professional_title'] = title.value;
            self.titleVal = title.value;
          }else if(self.current == '7'){
            data['position'] = job.value;
            self.jobVal = job.value;
          }
          RequestPost({url:'/user/changeInfo',data: data}).then((res)=>{
            if(res.data.code == 1){
              self.main = true;
              self.showtext = false;
            }else{
              Toast('服务器繁忙，请稍后再试！');
              self.main = true;
              self.showtext = false;
            }
          })

        }
      },
      close(){
        this.academics = false;
      },
      management(){
          this.$router.push('/change')
      },
      academic(){
        this.academics = true;
      },
      authentication(){
        let self = this
        let fullname = self.lastName + self.firstName;
        self.$router.push(
          '/authentication?uid=' +  self.$route.query.uid + '&name=' + fullname
        )
      },
      phone(){
        let self = this;
        if(!self.mobilephone){
          this.$router.push(
            '/phone_validate?uid=' + self.$route.query.uid
          )
        }else {
          this.$router.push(
            '/phone_number?uid=' + self.$route.query.uid + '&phone=' + self.mobilephone
          )
        }
      },
      first_name() {
        let self = this;
        let msg = document.querySelector('.change_input p');
        msg.style.color = '#303030';
        self.main = false;
      },
      last_name() {
        let self = this;
        let msg = document.querySelector('.change_input p');
        msg.style.color = 'gainsboro';
        self.main = false;
        self.showtext = true;
        self.current = '1';
        self.lastName = document.querySelector('input[name=lastname]').value;
      },
      company() {
        let msg = document.querySelector('.change_input p');
        msg.style.color = 'gainsboro';
        this.main = false;
        this.showtext = true;
        this.current = '4';
        this.comPany = document.querySelector('input[name=company]').value;
      },
      addr(){
        let msg = document.querySelector('.change_input p');
        msg.style.color = 'gainsboro';
        this.main = false;
        this.showtext = true;
        this.current = '3';
        this.addrs = document.querySelector('input[name=addr]').value;
      },
      sex(){
        this.showSex = true;
      },
      education(){
        this.showEducation = true;
      },
      department(){
        let self = this;
        let msg = document.querySelector('.change_input p');
        msg.style.color = 'gainsboro';
        self.main = false;
        self.showtext = true;
        self.current = '5';
        self.department = document.querySelector('input[name=department]').value;
      },
      title(){
        let self = this;
        let msg = document.querySelector('.change_input p');
        msg.style.color = 'gainsboro';
        self.main = false;
        self.showtext = true;
        self.current = '6';
        self.title = document.querySelector('input[name=title]').value;
      },
      job(){
        let self = this;
        let msg = document.querySelector('.change_input p');
        msg.style.color = 'gainsboro';
        self.main = false;
        self.showtext = true;
        self.current = '7';
        self.job = document.querySelector('input[name=job]').value;
      },
      ShouPup(){
        this.show = true;
      },
      sexOn(val) {
        let self = this;
        let gender = '';
        gender = (val=='男') ? 1 : 0;
        RequestPost({url:'/user/changeInfo',data: {'id':this.$route.query.uid,'gender':gender}}).then((res)=>{
          if(res.data.code == 1){
            self.sexVal = val;
            self.showSex = false;
          }else{
            Toast('服务器繁忙，请稍后再试！');
          }
        })
      },
      educationOn(val){
        let self = this;
        self.educationVal = val;
        RequestPost({url:'/user/changeInfo',data: {'id':this.$route.query.uid,'degree':val}}).then((res)=>{
          if(res.data.code == 1){
            self.educationVal = val;
            self.showEducation = false;
          }else{
            Toast('服务器繁忙，请稍后再试！');
          }
        })
      },
      onRead(file) {
          console.log(file.content);
            let self = this;
            self.avatar = file.content;
            RequestPost({url:'/user/changeInfo',data: {'uid':this.$route.query.uid,'avatar':self.avatar}}).then((res)=>{
                if(res.data.code == 1){
                    self.main = true;
                }else{
                    Toast('服务器繁忙，请稍后再试！');
                }
            })
       },
      onCancel() {
        this.showSex = false;
        this.showEducation = false;
        this.showDepartment = false;
        this.showTitle = false;
        this.showJob = false;
      },
      checkboxs(){
        let self = this;
        let data = {'id':this.$route.query.uid};
        data['academic'] = self.academic_text;
        RequestPost({url:'/user/changeInfo',data: data}).then((res)=>{
          if(res.data.code == 1){
            self.main = true;
            self.academics = false;
          }else{
            Toast('服务器繁忙，请稍后再试！');
          }
        })
      },
      toggle(index) {
        console.log(this.academic_text);
      }
    },
    watch: {
      '$route': function (n, o) {
        this.uid = n.query.uid;
      }
    },
    mounted () {
      this.getInfo();
      this.uid = this.$route.query.uid;
      this.identity = this.txts;
      this.mobilphone = this.phonenum;
    }
  }

</script>

<style lang="scss" scoped>
  .mian {
    .change_input{
      width: 100%;
      text-align: left;
      input{
        border-bottom: 0.025rem solid gainsboro;
        display: block;
        width: 90%;
        margin: 60px auto 20px auto;
        padding: 10px;
        font-size: 32px;
        background: none;
      }
      p{
        width: 90%;
        margin: auto;
        font-size: 28px;
      }
    }
    .head_tool{
      padding: 20px;
      background: #597fe3;
      color: #fff;
      height: 40px;
      font-size: 32px;
      span:first-child{
        float: left;
        transform: scaleY(1.8);
        line-height: 40px;
      }
    }
    .list_van{
      position: fixed;
      width: 100%;
      text-align: center;
      margin: 0;
      li{
        width: 100%;
      }
      .van-picker-column__item--selected{
        font-size: 18px;
        border-bottom: 1px solid #eee;
      }
    }
    .pics{
      height: 2rem;
      line-height: 2rem;
      img{
        display: inline-block;
        /*border: 1px solid gray;*/
        overflow: hidden;
        background: none;
        width: 60PX;
        height: 60PX;
        float: right;
        border-radius: 50%;
        margin-top: 2PX;
      }
    }
    ul li{
      width: 100%;
      display: block;
      height: 100px;
      line-height: 100px;
      overflow: hidden;
      padding: 10px 18px;
      box-sizing: border-box;
      border-bottom: 1PX solid gainsboro;
      background-color: #fff;
      span{
        display: block;
        float: left;
        text-align: left;
        width: 40%;
        font-size: 32px;
        text-indent: 54px;
        background-size: 0.5rem!important;
      }
      .box0{background: url('~@/common/image/icon_touxiang.png') left center no-repeat;}
      .box1{background: url('~@/common/image/accute.png') left center no-repeat;}
      .box2{background: url('~@/common/image/name.png') left center no-repeat;}
      .box3{background: url('~@/common/image/name.png') left center no-repeat;}
      .box4{background: url('~@/common/image/sex.png') left center no-repeat;}
      .box5{background: url('~@/common/image/study.png') left center no-repeat;}
      .box6{background: url('~@/common/image/major.png') left center no-repeat;}
      .box7{background: url('~@/common/image/id_cord.png') left center no-repeat;}
      .box8{background: url('~@/common/image/mobilphone.png') left center no-repeat;}
      .box9{background: url('~@/common/image/addr.png') left center no-repeat;}
      .box10{background: url('~@/common/image/company.png') left center no-repeat;}
      .box11{background: url('~@/common/image/club.png') left center no-repeat;}
      .box12{background: url('~@/common/image/job.png') left center no-repeat;}
      .box13{background: url('~@/common/image/job.png') left center no-repeat;}
      .box7_button{
        background: #fff;
        color: #303030;
        height: 30PX;
        line-height: 30PX;
        width: auto;
        padding: 0 14PX;
        border-radius: 31PX;
        margin-top: 5PX;}
      .audited{background: orange;color: #fff;}
      .passed{background: #4caf50;color: #fff;}
      .accepted{background: #5656aa;color: #fff;}
      .invited{background: #ffc107;color: #fff;}
      .uncertified{background: #5a5a5a;color: #fff;}
      .rejected{background: #005ab4;color: #fff;}
      .accepted{background: sandybrown;color: #fff;}
      input{
        display: block;
        float: right;
        text-align: right;
        width: 60%;
        line-height: 100px;
        background: transparent;
        font-size: 32px;
        overflow-x: scroll;
      }
    }
    .select_list{
      width: 100%;
      li{
        font-size: 32px;
      }
      .on{
        background: #05c;
        color: #fff;
      }
    }
  }

</style>
<style>
  .pics .van-uploader{float: right;}
  .mian .van-picker__toolbar{height: 1rem;line-height: 1rem;}
  .mian .van-checkbox__label{font-size: 30px;}
  .mian .van-checkbox{height: 82px;line-height: 82px;}
  .mian .van-icon{width: 30px!important;height: 30px!important;}
  .main_defalt .list_van .van-cell__title{width:94%;line-height: 62px;text-align: left;font-size: 30px;-webkit-box-flex: unset;-ms-flex: unset;flex: unset;}
  .main_defalt .list_van .van-cell__value{width:6%;line-height: 62px;text-align: left;font-size: 30px;-webkit-box-flex: unset;-ms-flex: unset;flex: unset;}
  .mian .van-cell--clickable{ width: 100%!important; border-bottom: 0.025rem solid gainsboro!important;}
  .mian .van-checkbox__icon, .van-checkbox__label { line-height: 0.33rem; }
  .mian .van-icon-success{margin-right: 10px;}
  .mian .van-cell{border: none;}
</style>
